<template>
<!-- 如何在父组件写了子组件替换插槽的样子，会把样式和标签解析完毕，传入子组件 -->
    <div id="app">

      <category title="游戏">
<!--   拿插槽变量必须用template包裹     -->
<!--        scope="games" 数据 从子组件插槽定义的变量来， 是个对象-->
<!--        <template scope="{games}"> 解构赋值-->
        <template scope="games">
          <ul>
            <li v-for="(item,index) in games.games" :key="index">{{item}}</li>
          </ul>
          <h2>{{games}}</h2>
        </template>
      </category>

<!--      <category title="游戏" :listData="games">
        <ol>
          <li v-for="(item,index) in games" :key="index">{{item}}</li>
        </ol>
      </category>

      <category title="游戏" :listData="games">
          <h4 v-for="(item,index) in games" :key="index">{{item}}</h4>
      </category>-->

    </div>
</template>

<script>
import Category from "./components/Category.vue";

export default {
    name: "App",
    components: {
      Category
    },
    /*data() {
        return {
          games:["红色警戒","穿越火线","劲舞团","超级玛丽"],
        }
    },
    methods: {

    }*/
}
</script>

<style>
#app, .footer {
  display: flex;
  justify-content: space-around;
}
video{
  width: 100%;
}
</style>
